<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
</head>
<style>
    #app{
      width: 100%;
      background: #f9f9f9;
      overflow: hidden;
    }
    body{
      background: #f9f9f9;
    }
    .logo{
      width: 1.88rem;
      height: 1.73rem;
      margin: 0 auto;
      margin-top: 1.8rem;
    }
    .logo img{
      width: 1.88rem;
      height: 1.73rem;
    }
    .text{
      height: 0.85rem;
      width: 100%;
      line-height: 0.85rem;
      text-align: center;
      font-size: 0.85rem;
      margin-top: 0.95rem;
    }
    .login{
      margin-top: 2.88rem;
    }
    .login .tel{
      width: 15.08rem;
      height: 1.85rem;
      margin:0 auto;
      border-bottom: 0.1rem solid #cecece;
      display: flex;
    }
    .login .tel .phone{
      width: 0.65rem;
    	height: 0.7rem;
    }
    .login .tel input{
      height: 0.8rem;
      margin-left: 0.3rem;
      color: #0a87ff;
      text-shadow: 0px 0px 0px #000;
      -webkit-text-fill-color: #666;
    }
    .login .tel .detail{
      width: 0.78rem;
      height: 0.78rem;
    }
    .next{
      width: 15rem;
    	height: 2.3rem;
      background-color: #cecece;
    	background-image: #cecece;
    	border-radius: 0.25rem;
      margin: 0 auto;
      margin-top: 3.43rem;
      line-height: 2.3rem;
      text-align: center;
      font-size: 0.85rem;
      color: #ffffff;
      letter-spacing: 0.05rem;
    }
    .footer{
      position: fixed;
      bottom: 0;
      left:0;
      right: 0;
      height: 5.15rem;
      width: 18.75rem;
      display: flex;
      margin:0 auto;
      margin-top: 9.8rem;
      overflow: hidden;
    }
    .footer .left{
      width: 5.9rem;
      height: 4.83rem;
      margin: 0.3rem 0.45rem 0 0.95rem;
      border-top: 0.03rem solid #ccc;
      display: flex;
      align-items: center;
    }
    .footer .center{
      width: 4.3rem;
	    height: 0.57rem;
      font-size: 0.6rem;
      color: #b2b2b2;
    }
    .footer .right{
      width: 5.9rem;
      height: 4.83rem;
      margin: 0.3rem 0.98rem 0 0.45rem;
      border-top: 0.1rem solid #ccc;
      display: flex;
      align-items: center;
    }
    .footer .left img{
      width: 0.98rem;
	    height: 1.13rem;
      margin-left: 5.8rem;
    }
    .footer .right img{
      width: 0.98rem;
	    height: 1.13rem;
    }
</style>
<body>
<div id="app">
    <div class="logo">
      <img src="../../image/logo.png" alt="">
    </div>
    <div class="text"><span>欢迎来到盛通麻将</span></div>
    <div class="login">
      <div class="tel" ref="ref_tel">
        <img class="phone" src="../../image/phone.png" alt="">
        <input type="number" placeholder="请输入电话号码" v-model="mobile" ref="refcode" @input="vaitail" maxlength="11" value=""
 oninput="if(value.length>11)value=value.slice(0,11)" >
        <img class="detail" src="../../image/detail2.png" alt="" v-if="detail_show" @click="detail">
    </div>
    </div>
    <div class="next" @click="nextClick('login','login/logs','注册/登录')" ref="ref_next">
        <span>下一步</span>
    </div>
    <div class="footer">
        <div class="left">
          <img src="../../image/qq.png" alt="">
        </div>
        <div class="center"><span>第三方账号登录</span></div>
        <div class="right">
          <img src="../../image/wx.png" alt="">
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
  apiready = function(){
  }

  new Vue({
    el: '#app',
    data: {
      mobile:"",
      detail_show:false,
      value:'',
    },
    methods: {
      nextClick:function(name,page,type){
        var phone_number = this.$refs.refcode.value.length;
        if(phone_number>10){
          api.openWin({
              name: name,
              url: '../header/user_header.html',
              pageParam: {
                name: page,
                type:type
              }
          });
        }
      },
      vaitail:function(){
          // 判断正则表达式
          var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
          if(!myreg.test(this.mobile)){

          }
          // 当输入的时候，出现删除钮
          var phone_number = this.$refs.refcode.value.length;
          if(phone_number>0){
            this.detail_show=true
            // 当输入的时候，下边框颜色变化
            this.$refs.ref_tel.style.borderBottom= "0.1rem solid #0a87ff";
          }
          // 当输入完成时候，下一步颜色变化
          if(phone_number>10){
            console.log(this.$refs.ref_next.style)
            this.$refs.ref_next.style.backgroundImage="linear-gradient(90deg, #3290c6 0%, #1e8ce3 0%, #0a87ff 0%, #5fc2b8 100% ),linear-gradient(	#cecece,	#cecece	)";
            // 当输入完成的时候，下边框颜色变化
            this.$refs.ref_tel.style.borderBottom= "0.1rem solid #cecece";
          }
          console.log(this.$refs.refcode.value.length)
      },
      detail:function(){
          this.detail_show=false;
          this.mobile=[]
      }
    }
})


</script>
